<!-- home.vue -->
<template>
  <f7-page name="home" color-theme="red" class="backgroundColor" @page:afterin="pageAfterin">
    <!-- Page content -->
    <!-- navbar -->
    <v-header />
    <!-- main -->
    <v-mainContainer />
    
    <!-- footer -->
    <v-playerBar :hasMusicList="getPageGradation===0?true:false" v-show="!getBottomBarState" from='home' />
  </f7-page>
</template>
<script>
import Header from '@/components/header.vue'
import MainContainer from '@/components/maincontainer.vue'
import PlayerBar from '@/components/playerbar.vue'
import { getToken } from '@/utils/auth.js'
import { mapGetters,mapActions } from 'vuex'
export default {
  components: {
    'v-playerBar': PlayerBar,
    'v-header': Header,
    'v-mainContainer': MainContainer,
  },
  computed: {
    ...mapGetters({
      getBottomBarState: 'getBottomBarState',
      getPageGradation:'getPageGradation',
    }),
  },
  methods:{
    ...mapActions({
      changePageGradation:'changePageGradation',
    }),
    pageAfterin(){
      this.changePageGradation(0);
    }
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light {
  $backgroundColor: #d9e7e7;
  /deep/ .page-content {
    background-color: $backgroundColor;
  }
}
.dark {
  $backgroundColor: #212121;
  /deep/ .page-content {
    background-color: $backgroundColor;
  }
}
</style>
